<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-06 16:09:15
 * @LastEditors: icymoon911 icymoon911@163.com
 * @LastEditTime: 2024-07-22 21:41:04
 * @FilePath: \ken147258.topayClient\src\views\payer\personalInfo\info.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <h2>绑定GOOGLE验证</h2>
    <p>为了你的商户资金安全,你可授权绑定GOOGLE验证,谢谢合作！</p>
    <div flex flex-row items-end mb-10px>
      <span class="info-label">绑定GOOGLE身份验证</span>
      <div ml-26px inline-block h-200px>
        <el-skeleton style="width: 200px" :loading="loading" animated>
          <template #template>
            <el-skeleton-item variant="image" style="width: 200px; height: 200px" />
          </template>
          <template #default>
            <el-image :src="codeurl" alt="google" class="image" />
          </template>
        </el-skeleton>
      </div>
    </div>
    <div style="margin-left: 190px">
      <div>
        <el-input v-model="secret" style="width: 240px" placeholder="请输入" /><el-button
          type="primary"
          style="margin-left: 10px"
          @click="handleCopy()"
          >复制</el-button
        >
      </div>
      <div style="margin-top: 10px">
        <el-input
          v-model="input"
          style="width: 240px"
          placeholder="所需绑定GOOGLE验证码,请扫码获取GOOGLE验证码"
        />
      </div>
      <div style="margin-top: 10px">
        <el-button type="primary" @click="submitBind">提交绑定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getGoogleCode as getCodeByOther,
  getBind as getBindByOther,
} from "@/api/other/user";
import {
  getCode as getCodeByPayee,
  getBind as getBindByPayee,
} from "@/api/payee/account";
import { getCode as getCodeByPayer, getBind as getBindByPayer } from "@/api/payer/order";
import { useUserStore } from "@/store";
import router from "@/router";

defineOptions({
  name: "info",
  inheritAttrs: false,
});
const userStore = useUserStore();
// const input = ref("");
const codeurl = ref("");
// const secret = ref("");
const secret = defineModel("secret", { type: String, default: "" });
const input = defineModel("input", { type: String, default: "" });

const { copy } = useClipboard({ legacy: true });
const loading = ref(true);

const loginType = userStore.getLoginType();

onMounted(() => {
  getCodeFun();
});
const getCodeFun = () => {
  const getCode =
    loginType == "other"
      ? getCodeByOther
      : loginType == "payee"
      ? getCodeByPayee
      : getCodeByPayer;

  getCode().then((res) => {
    codeurl.value = res.qr_code_url;
    secret.value = res.secret;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  });
};

const submitBind = () => {
  const getBind =
    loginType == "other"
      ? getBindByOther
      : loginType == "payee"
      ? getBindByPayee
      : getBindByPayer;

  getBind({ secret: secret.value, code: input.value }).then((res) => {
    ElMessage.success(res);

    router.push({ path: '/login/' + loginType });
    // userStore.resetToken().then(() => {
    //   router.push({ path: '/login:' + loginType });
    // });
  }).catch((err) => {
    ElMessage.error('绑定出错');
  });
};

function handleCopy() {
  copy(secret.value).then(() => {
    ElMessage.success("复制成功");
  });
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  background: #fff;
  padding: 24px;
  .info-label {
    width: 170px;
    display: inline-block;
    margin-bottom: 10px;
  }
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
</style>
